<template>
  <Panel ref="func1" title="Func1" style="height:100%" bodyCls="f-column" :border="false">
    <Layout>
      <LayoutPanel region="center" style="height:100%" bodyCls="f-column">
    <div class="search-form">
      <div class="form-item">
      <Label for="c1" align="left">输入日期</Label>
      <DateBox label="日期2" inputId="c1" v-model="query.c1" format="yyyy-MM-dd"></DateBox>
      </div>

      <div class="form-item">
      <Label for="c2" align="left">输入名字</Label>
      <TextBox inputId="c2" v-model="query.c2" iconCls="icon-man" placeholder="First name"></TextBox>
      </div>

      <div class="form-item">
      <Label for="c3" align="left">输入国家</Label>
      <ComboBox inputId="c3" v-model="query.c3" :data="comboData"></ComboBox>
      </div>

      <div class="form-item">
      <Label for="c5" align="left">输入数字</Label>
      <NumberBox inputId="c5" :value="100" :spinners="true" v-model="query.c5"></NumberBox>
      </div>

      <div class="form-item">
      <Label for="c6" align="left">输入密码</Label>
      <PasswordBox inputId="c6" v-model="query.c6" placeholder="Password"></PasswordBox>
      </div>

      <div class="form-item">
        <Label for="c8">开关选项</Label>
        <SwitchButton inputId="c8" v-model="query.c8"></SwitchButton>
      </div>

      <div></div>

      <div style="display:inline-block">
      <div v-for="fruit in fruits" :key="fruit">
        <label>
          <CheckBox :value="fruit" v-model="query.c4" />
          {{fruit}}
        </label>
      </div>
      </div>

      <div style="display:inline-block">
      <div v-for="fruit in fruits" :key="fruit">
        <label>
          <RadioButton :value="fruit" v-model="query.c7" />
          {{fruit}}
        </label>
      </div>
      </div>

      <LinkButton iconCls="icon-search" @click="search()">查询</LinkButton>
    </div>

    <div class="datagrid-toolbar">
      <LinkButton iconCls="icon-add" @click="addRow()">添加</LinkButton>
      <LinkButton iconCls="icon-remove" :disabled="selection==null" @click="deleteRow()">删除</LinkButton>
      <LinkButton iconCls="icon-save" :disabled="selection==null" @click="editRow()">编辑</LinkButton>
    </div>

    <DataGrid selectionMode="single" class="f-full"
              :data="gridData" :border="false"
              :style="{height: (screenHeight-170)+'px'}"
              :pagination="true"
              :pageLayout="['list','sep','first','prev','next','last','sep','refresh','info']"
              @pageChange="onPageChange($event)"
              @selectionChange="selection=$event">
      <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
        <template slot="body" slot-scope="scope">
          {{scope.rowIndex + 1}}
        </template>
      </GridColumn>
      <GridColumn field="itemid" title="Item ID"></GridColumn>
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
      <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
      <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
      <GridColumn field="status" title="Status" align="center"></GridColumn>
    </DataGrid>

    <Dialog ref="d1"
            :title="'Draggable And Resizable'"
            :dialogStyle="{width:'400px',height:'200px'}"
            :modal="true"
            :draggable="true"
            :resizable="true"
            :closed="true">
      <p style="text-align:center;margin:50px 0;font-size:16px">The Dialog Content.</p>
    </Dialog>
      </LayoutPanel>
    </Layout>
  </Panel>
</template>

<script>
export default {

  data () {
    return {
      query: {
        c8: true
      },
      fruits: ['Apple', 'Orange', 'Banana'],
      value: new Date(),
      selection: null,
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      comboData: [
        { value: 11, text: 'Mr. Nice' },
        { value: 12, text: 'Narco' },
        { value: 13, text: 'Bombasto' },
        { value: 14, text: 'Celeritas' },
        { value: 15, text: 'Magneta' },
        { value: 16, text: 'RubberMan' },
        { value: 17, text: 'Dynama' },
        { value: 18, text: 'Dr IQ' },
        { value: 19, text: 'Magma' },
        { value: 20, text: 'Tornado' }
      ],
      gridData: [
        {
          code: 'FI-SW-01',
          name: 'Koi',
          unitcost: 10.0,
          status: 'P',
          listprice: 36.5,
          attr: 'Large',
          itemid: 'EST-1'
        },
        {
          code: 'K9-DL-01',
          name: 'Dalmation',
          unitcost: 12.0,
          status: 'P',
          listprice: 18.5,
          attr: 'Spotted Adult Female',
          itemid: 'EST-10'
        },
        {
          code: 'RP-SN-01',
          name: 'Rattlesnake',
          unitcost: 12.0,
          status: 'P',
          listprice: 38.5,
          attr: 'Venomless',
          itemid: 'EST-11'
        },
        {
          code: 'RP-SN-01',
          name: 'Rattlesnake',
          unitcost: 12.0,
          status: 'P',
          listprice: 26.5,
          attr: 'Rattleless',
          itemid: 'EST-12'
        },
        {
          code: 'RP-LI-02',
          name: 'Iguana',
          unitcost: 12.0,
          status: 'P',
          listprice: 35.5,
          attr: 'Green Adult',
          itemid: 'EST-13'
        },
        {
          code: 'FL-DSH-01',
          name: 'Manx',
          unitcost: 12.0,
          status: 'P',
          listprice: 158.5,
          attr: 'Tailless',
          itemid: 'EST-14'
        },
        {
          code: 'FL-DSH-01',
          name: 'Manx',
          unitcost: 12.0,
          status: 'P',
          listprice: 83.5,
          attr: 'With tail',
          itemid: 'EST-15'
        },
        {
          code: 'FL-DLH-02',
          name: 'Persian',
          unitcost: 12.0,
          status: 'P',
          listprice: 23.5,
          attr: 'Adult Female',
          itemid: 'EST-16'
        },
        {
          code: 'FL-DLH-02',
          name: 'Persian',
          unitcost: 12.0,
          status: 'P',
          listprice: 89.5,
          attr: 'Adult Male',
          itemid: 'EST-17'
        },
        {
          code: 'AV-CB-01',
          name: 'Amazon Parrot',
          unitcost: 92.0,
          status: 'P',
          listprice: 63.5,
          attr: 'Adult Male',
          itemid: 'EST-18'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        },
        {
          itemid: 'AV-CB-01'
        }
      ]
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.body.clientHeight
        that.screenWidth = document.body.clientWidth
      })()
    }
  },
  computed: {
    selectionInfo () {
      if (!this.selection) {
        return null
      }
      return this.selection.itemid
    }
  },
  methods: {
    onPageChange (event) {
    },
    addRow () {
      this.$refs.d1.open()
    },
    deleteRow () {
      console.log('deleteRow')
    },
    editRow () {
      console.log('editRow')
    },
    search () {
      console.log('search', JSON.stringify(this.query))
    }
  }

}
</script>

<style>
  .search-form {
    margin:10px 0 0 10px
  }
  .form-item {
    margin-bottom:10px;display:inline-block;margin-right:1em
  }
</style>
